import React, { useState, useEffect } from "react"
import service from "@@/services/user.service"
import { industryByExhibitionResType } from "@@/interfaces/api.interface"
import { View, WebView, Text, Image, ScrollView } from "@tarojs/components"
import "./model.scss"
import { useDidShow, showToast, } from "@tarojs/taro"
import Taro from "@tarojs/taro"
import data from './data'
import NavLayout from "@@/components/layout/nav.layout"
import { copySync } from "fs-extra"
let model;

const ModelPage = (props) => {
  const [load, setLoad] = useState<boolean>(false)//模型加载完成
  const [open, setOpen] = useState(false) //打开弹窗
  const [down, setDown] = useState(true) //关闭弹窗里的down箭头
  const [exhibitionList, setExhibitionList] = useState<industryByExhibitionResType[]>([])

  useEffect(() => {
    init();
  }, [])

  const init = async () => {
    let exhibitionId;
    const res = await service.getExhibitionId()
    if (res.code === 200) {
      exhibitionId = res.data
    }
    service.listIndustryByExhibitionId({ exhibitionId }).then(res => {
      if (res.code === 200) {
        setExhibitionList(res.data)
      }
    })
  }
  useDidShow(() => {
    model = new (window as any).JMYDModel({
      url: 'http://dahua-qianduan.51jianmo.com/model.jm2',
      el: '#model',
      progress: (e: any) => {
        // console.log(e)
        if (e.loaded / e.total === 1) {
          setTimeout(() => {
            setLoad(true)
          }, 500)
        }
      },

      data: () => {
        return { ...data, type: "jm2" }
      },
      loaded: () => {
        let mark = 0
        model.hotspotPass.isshow = true;
        model.hotspotPass.initHotSpot();
        let json = '[[0,1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,25,26,27,28]]'
        model.playexcessivehotpot(1, json)
        model.playCurAnimation()
        model.beforeFly()

        // model.hotspotPass.select(index)
        model.on('hotspotSelected', function (e) {
          if (e.evtType === "_USR") {
            let env = getQueryVariable('env')
            if (env == 'h5') {
              window.top.location.href = '/pages/smb/smb'
            } else {
              wx.miniProgram.navigateTo({ url: "/pages/smb/smb" })
            }
          }
        })
      }
    })
  })
  const getQueryVariable = (variable: string) => {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }

  const openPop = () => {
    setOpen(!open)
  }

  const onScroll = (event) => {
    if (event?.detail?.scrollTop > 100) {
      setDown(false)
    } else {
      setDown(true)
    }
  }

  const rotateModel = (industryId: number) => () => {
    setOpen(false)
    model.hotspotPass.select(industryId);
  }
  return <NavLayout border leftIconType="chevron-left" title="线上云展" color="#141414" id="FancyPage">
    <View className='model' id='model'></View>
    <View></View>
    {
      load && <View className="more">
        <Text onClick={openPop}>导览</Text>
        <View className={'img_box'}><Image mode={"aspectFit"} src={require('@@/assets/img/daolan.png')} /></View>
      </View>
    }
    <View className={"pop"} style={{ display: open ? "block" : "none" }}>
      <ScrollView id="content_box" className={"content_box"} onScroll={onScroll}>
        {
          exhibitionList[0] && exhibitionList.map(item => {
            return <View className={`item_box`} key={item.industryId} onClick={rotateModel(item.industryId)}>
              <View className={`hot_bg ${item.state ? "hot_red_bg" : ""}`}>
                <View className={"img_box"}><Image mode={"aspectFit"} src={require(`@@/assets/img/yunzhan/${item.industryId}.png`)} /></View>
              </View>
              <Text>{item.industryName}</Text>
            </View>
          })
        }
      </ScrollView>
      {
        down && <View className={"down_box"}><Image mode={"aspectFit"} src={require('@@/assets/img/yunzhan/down.png')} /></View>
      }
      <View className={"collapse_box"} onClick={openPop}><Image mode={"aspectFit"} src={require('@@/assets/img/yunzhan/collapse.png')} /></View>
    </View>
  </NavLayout>
}
export default ModelPage
